<template>
	<view class="">
		<!-- 自定义头部 -->
		<view class="header_nav">
			<view class="status_bar" :style="{height:recHeight+'px'}"></view><!-- 状态栏 -->
			<view class="header_title"
				:style="{height:titleBarHeight+'px',top:recHeight+'px',lineHeight:titleBarHeight +'px'}">
				<!-- 顶部导航栏 -->
				<view class="_font-18 _pos-rel _flex-row-mid" style="color: #101010;">
					<navigator open-type="navigateBack" class="_font-18 _pad-x-15 iconfont icon-zuo">
					</navigator>
					租车资质认证
				</view>
			</view>
			<view class="_w-max img" :style="{height:headerHeight+'px'}"></view>
		</view>
		<view class="_w-max" :style="{height:headerHeight+'px'}"></view>
		<view class="_w-max _white-bg _flex-col-mid _pad-x-25" style="height: 100vh;padding-top: 160rpx;" v-if="list.length<1">
			<image style="width: 320rpx;height: 234rpx;" src="https://uxcar.uxphp.net/uploads/attach/2023/08/20230824/7a3d7e56acf3a6e3485831650ce5ecdb.png" mode="widthFix"></image>
			<text class="_mar-top-15" style="color: #B7B7B7;font-size: 26rpx;">未添加取车人信息</text>
			<text class="_mar-top-15" style="color: #B7B7B7;font-size: 26rpx;">点击下发按钮马上添加吧</text>
			<navigator url="/pages/car_sub/auth/fill_info" hover-class="none" class="_w-max _white _text-center theme-color-bg" style="margin-top: 160rpx;height: 88rpx;border-radius: 200rpx;line-height: 88rpx;">
				立即添加
			</navigator>
		</view>
		<view class="index" v-else>
			<view class="add" @click="add">
				<text class="iconfont icon-tianjia1"></text>
				<text class="_pad-left-5">添加取车人</text>
			</view>
			<view class="list _pad-x-15 _pad-y-20" v-if="list.length > 0">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in list" :key="index">
						<view class="_w-max _flex-row-mid _mar-bottom-20">
							<radio :value="index" :checked="contact_id == item.id" />
							<view class="_mar-left-10 _flex-col _flex-1">
								<view class="_flex-row-mid _pad-bottom-5 _font-16" style="color: #101010;">
									<view>{{item.name}}</view>
									<view class="auth_label theme-color-bg _mar-left-20" v-if="item.status==1">已认证</view>
									<view class="auth_label theme-color-bg" v-if="item.status==0">未认证</view>
									<view class="auth_label theme-color-bg" v-if="item.status==-1">认证失败</view>
								</view>
								<view class="_flex-row-bet-mid _pad-bottom-5 _grey-99 _font-13">
									<view>身份证号</view>
									<view style="width: 490rpx;">{{item.card_no}}</view>
								</view>
								<view class="_flex-row-bet-mid _grey-99 _font-13">
									<view>手机号</view>
									<view style="width: 490rpx;">{{item.phone}}</view>
								</view>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
			<view style="width: 100%;height: 200rpx;"></view>
			<view class="btn-box">
				<view class="btn theme-color-bg" @click="search">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCarContactList} from '@/api/car.js';
	export default{
		data(){
			return{
				recHeight: '', //状态栏高度
				titleBarHeight: '', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '', //顶部距离
				headerHeight: '', //头部总高度
				shopsListTop: '',
				list:{},
				contact_id:0,
				contact_name:'',
				contact_phone:'',
				index:3
			};
		},
		onLoad(options){
			if(options.contact_id){
				this.contact_id = options.contact_id;
				this.contact_name = options.contact_name;
				this.contact_phone = options.contact_phone;
			}
			uni.hideTabBar();
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height; //小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top; //顶部距离
			this.getPhoneInfo();
			this.getCarContactList();
		},
		onShow(){
			this.getCarContactList();
		},
		methods:{
			// 租车人列表
			getCarContactList(){
				var that = this;
				getCarContactList().then(res=>{
					that.list = res.data.list;
				})
			},
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				//小程序 配置
				uni.getSystemInfo({
					success(res) {
						that.recHeight = res.statusBarHeight; //获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
				const query = uni.createSelectorQuery().in(that);
				query.select('.shops_search').boundingClientRect(data => {
				}).exec();
			},
			//添加取车人
			add() {
				uni.navigateTo({
					url:'/pages/car_sub/auth/fill_info'
				})
			},
			// 选择取车人
			search() {
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1];
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.contact_id = this.contact_id;
				prevPage.$vm.contact_name = this.contact_name;
				prevPage.$vm.contact_phone = this.contact_phone;
				if(this.contact_id){
					uni.navigateBack({
						delta: 1
					})
				}else {
					return this.$util.Tips({
						title: '请选择取车人信息'
					});
				}
			
			},
			radioChange:function(e) {
				var item = this.list[e.detail.value];
				this.contact_id = item.id;
				this.contact_name = item.name;
				this.contact_phone = item.phone;
			}
		},
	}
</script>

<style scoped lang="scss">
	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	
		//顶部导航栏
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
			background-color: #ffffff;
		}
	
		.header_title {
			width: 100%;
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}
	
		.img {
			position: absolute;
			top: 0;
			z-index: 10;
		}
	}
	.index {
		width: 100%;
		// background-color: #ffffff;
		margin-top: 22rpx;
		.add {
			width: 100%;
			height: 184rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #cccccc;
		}
		.list {
			margin-top: 22rpx;
			width: 100%;
			// min-height: 75.8vh;
			background-color: #ffffff;
		}
		.btn-box {
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			padding-left: 50rpx;
			padding-right: 50rpx;
			bottom: 60rpx;
			.btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				// color: #fff;
				// background: linear-gradient(-88.58deg, rgba(98,98,98,1) -0.63%,rgba(75,73,75,1) 97.9%);
				border-radius: 200rpx;
				text-align: center;
			}
		}
	}
	.auth_label {
		width: 104rpx;
		height: 36rpx;
		border-radius: 200rpx;
		// background-color: rgba(190, 157, 120, 1);
		color: #fff;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
	}
</style>